<template>
  <div>
    <h4>响应式数据a:{{ a }}</h4>
    <p>非响应式数据b:{{ b }}</p>
    <button @click="update">更新数据</button>
    <p></p>
  </div>
</template>

<script setup>
import {ref,nextTick} from 'vue'
// vue里面一个对象挥着普通数据即使没有通过ref还让reactive的包装也可以具有响应式
const a = ref(10)
let b = 20
const update = ()=>{
  // a是响应式数据只要a已发生改变就会时触发页面更新视图重绘
  a.value++
  a.value++
  a.value++
  a.value++
  a.value++

  //打印顺序 
  console.log('页面更新DOM重新渲染之前',  document.querySelector('h4').innerText);// 1
  nextTick(()=>{
  console.log('页面更新DOM重新渲染之后',  document.querySelector('h4').innerText); // 2
setTimeout(()=>{
  console.log('定时器执行之后',  document.querySelector('h4').innerText)}) // 3
    
  })
  // b 时非响应式数据,点击按钮只是js里面的数据发生了改变,但是由于a导致了页面更新所以b的数据也随之更新到页面上
  b++
  
}
</script>